<template>
	<div class="app">
		<div>
			<h3 class="title"><span style="color: green;">统计数据管理/</span>其他数据统计</h3>
		</div>
		<el-descriptions
		    :column="1"
		    border
			class="descriptions"
		  >
			<template #title>
				<h3 style="color: orange;">其他数据统计</h3>
			</template>
		    <el-descriptions-item label="空气质量检测总数量">
				<template #default>
					{{backdata.test_total}}
				</template>
			</el-descriptions-item>
		    <el-descriptions-item label="空气质量检测良好数量">
				<template #default>
					{{backdata.well_total}}
				</template>
			</el-descriptions-item>
		    <el-descriptions-item label="省会城市网格覆盖范围">
				<template #default>
					{{backdata.capital_cover.toFixed(2)+"%"}}
				</template>
			</el-descriptions-item>
			<el-descriptions-item label="大城市网格覆盖范围">
				<template #default>
					{{backdata.big_city_cover.toFixed(2)+"%"}}
				</template>
			</el-descriptions-item>
		  </el-descriptions>
	</div>
</template>

<script setup>
import { reactive,onMounted, ref } from 'vue';
import axios from 'axios';
import { ElMessage } from 'element-plus';
	let backdata = reactive({
		test_total: 0,
		well_total: 0,
		capital_cover: 0,
		big_city_cover: 0
	})
	let getOtherStatistics = function(){
		axios.get("http://localhost:7000/service-nepm/administrator/getOtherMesg").then(res=>{
			ElMessage.success("其他数据指标统计成功");
			backdata.test_total = res.data.test_total;
			backdata.well_total = res.data.well_total;
			backdata.capital_cover = res.data.capital_cover;
			backdata.big_city_cover = res.data.big_city_cover; 
			console.log(backdata);
		})
	}
	onMounted(()=>{
		getOtherStatistics()
	})
</script>

<style scoped>
	.app{
		width: 100%;
	}
	.title{
		font-size: 15px;
	}
	.descriptions{
		width: 30%;
	}
</style>